Day3 | Form 表單 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 3

自我挑戰組

那些 Notion 中的前端筆記系列第 3 篇

Day3 | Form 表單

14th鐵人賽

echocarrie

2022-09-18 11:14:44

1782 瀏覽

分享至

❒ Form 表單

<form> 標籤是 HTML 中用來裝表單的容器， <form action="#">..</form> 中的 action 用來指定一個位址 ( URL )，這個位址是告訴瀏覽器當使用者按送出表單後，要將表格的內容送去哪邊。所以建議於表單外層使用 <form> 標籤做包覆。

避免將一個 label 標籤與多個控制元件相關聯， label 與 select 要分別設定，一個 label 標籤對應一個 select。

相關討論：stackoverflow 的相關討論

<form action="#">
    <label for="year">年份</label>
    <select id="year" aria-label="year">
        <option value="2019">2019</option>
        <option value="2020">2020</option>
    </select>
    <label for="month">月份</label>
    <select id="month" aria-label="month">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>        
</form>

❒ 常見的 HTML 表單元素

<label> 標籤
- <label> 標籤的 for 屬性會對應 <input> 標籤的 id 屬性。
<input> 標籤：輸入欄位，可搭配 type 屬性顯示不同方法。
- 詳細資訊可參考 w3school - HTML Input Types。
<textarea> 標籤：多行段落文字輸入欄位。
<select> 標籤搭配 <option> 標籤：下拉式選單。
<datalist> 標籤：下拉選項外也附帶文字輸入篩選功能。

❒ 常見的 HTML 表單元素屬性

name 屬性：name 中資料會顯示在網址上，提交表單後可從網址上的傳送值得知填的資訊取出對應欄位值。
- type 屬性中，同組 radio 與 checkbox 屬性的 name 須設定同名，才能表示是同組。CodePen 範例
disabled 屬性：禁止使用該表單元素。
value 屬性：表單元素的初始值。
placeholder 屬性：用法 <input placeholder="想顯示的文字"> ，用戶輸入值前 placeholder 屬性中的文字會顯示於欄位上。
- placeholder 屬性適用於以下輸入類型：文本、搜索、url、電話、電子郵件和密碼。
for 屬性與 id 屬性：
- <label> 標籤的 for 屬性會對應 <input> 標籤的 id 屬性。
- <label> 標籤的 for 屬性會對應 <select> 標籤的 id 屬性。

❒ datalist 與 option 標籤差異

CodePen 範例

使用時機

datalist 標籤適用於選項很多的選單，除了下拉選項外也附帶文字輸入篩選功能，輸入關鍵字會跳出對應的選項。select 標籤需要手動選取選單內的選項。

datalist 架構

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

「label 標籤的 for 屬性」對應「 input 標籤的 id 屬性」。
架構為 input 加上 datalist 標籤，「input 標籤的 list 屬性」對應「datalist 標籤的 id 屬性」。
datalist 內的 <option> 標籤與 select 標籤不同的是，datalist 內的 <option> 標籤不需要 </option> 結尾。
input 標籤的 name 屬性
- 如果網頁內的資料傳遞是使用實際頁面非 API ( SSR )，select 標籤就需要加上 name 屬性，後端工程師可由此知道此資訊名稱。基本上 name 是給後端看的， id 是前端操作用的。一般 name 屬性會與 id 屬性命名相同。
- name 中資料會顯示在網址上，提交表單後可從網址上的傳送值得知填的資訊。提交表單後，文字欄位會以 name 中的值當欄位名稱。

select 架構

<label for="city-select">Choose a City:</label>

<select name="CitySelect" id="city-select">
    <option value="" selected disabled>--請選取區域--</option>
    <option value="Kaohsiung">高雄市</option>
    <option value="Tainan">台南市</option>
    <option value="Taichung">台中市</option>
</select>